import styles from "./dialog-message-action.module.scss"
import {Select,Radio } from 'antd'
import {SessionConfig} from "@/types/chat";
import {userChatStore} from "@/app/store/chat-store";
import {GLMVersion} from "@/app/constants";
import Icon from '@ant-design/icons';
import BreakIcon from "../../icons/break.svg";
import {useRef, useState} from "react";
import type { RadioChangeEvent } from 'antd';
import {SelectComponent} from "../select/select"
// 自定义
export function Action(props: {
    icon: JSX.Element;
    onClick?: () => void;
}){
    return <div className={styles['chat-input-action']} onClick={props.onClick}>
        <div className={styles["icon"]}>
            {props.icon}
        </div>
    </div>
}
export function ChatAction(props: {
    text?: string;
    icon: JSX.Element;
    onClick: () => void;
}) {
    const iconRef = useRef<HTMLDivElement>(null);
    const textRef = useRef<HTMLDivElement>(null);
    const [width, setWidth] = useState({
        full: 16,
        icon: 16,
    });

    function updateWidth() {
        if (!iconRef.current || !textRef.current) return;
        const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
        const textWidth = getWidth(textRef.current);
        const iconWidth = getWidth(iconRef.current);
        setWidth({
            full: textWidth + iconWidth,
            icon: iconWidth,
        });
    }

    return (
        <div
            className={`${styles["chat-input-action"]} clickable`}
            onClick={() => {
                props.onClick();
                setTimeout(updateWidth, 1);
            }}
            onMouseEnter={updateWidth}
            onTouchStart={updateWidth}
            style={
                {
                    "--icon-width": `${width.icon}px`,
                    "--full-width": `${width.full}px`,
                } as React.CSSProperties
            }
        >
            <div ref={iconRef} className={styles["icon"]}>
                {props.icon}
            </div>
            <div className={styles["text"]} ref={textRef}>
                {props.text}
            </div>
        </div>
    );
}
export default function DialogMessagesActions(props : {
    config:SessionConfig
}){
    const chatStore = userChatStore();
    const {config} = props
    const [value, setValue] = useState(1);

    const onChange = (e: RadioChangeEvent) => {
        setValue(e.target.value);
    };
    return (
        <div className={styles['chat-input-actions']}>
            <Action icon={<Icon component={BreakIcon} />} onClick={() => {
                chatStore.updateCurrentSession((session) => {
                    console.log("清除索引值" + session.clearContextIndex)
                    if (session.clearContextIndex === session.messages.length) {
                        session.clearContextIndex = undefined;
                    } else {
                        session.clearContextIndex = session.messages.length;
                    }
                });
            }}></Action>
            <SelectComponent config={config}/>


        </div>
    )
}
